<template>
  <div>
    <div class="search">
      <van-search
        v-model="name"
        placeholder="请输入搜索关键词"
        input-align="center"
         @search="onSearch"
      >
      <div slot="action" @click="onSearch">搜索</div>
      </van-search>
    </div>
      <div class="list">
        <van-grid :column-num="2">
          <van-grid-item v-for="(item,i) in list" :key="i" @click="detail(item.id)">
            <van-image :src="item.image" class="pimg" />
            <p class="title">{{item.title}}</p>

            <p class="price">￥{{item.price}}</p>
          </van-grid-item>
        </van-grid>
      </div>
  </div>
</template>

<script>
import api from "../api/api_pro";
export default {
  name: "Home",
  data() {
    return {
      title: "更多游戏",
      active: 0,
      name: "",
      list: [],
    };
  },
  mounted() {
    this.$emit("toparent", this.title);
    let params = {
        name : this.name
    };
    api.getGame(params).then(data => {
      if (data.code === 200) {
        console.log(data);
        this.list = data.data;
        console.log(this.list);
      }
    });
  },

  methods: {
    detail(id) {
      this.$router.push("/detail/" + id);
    },
    onSearch:function()
    {
      let params = {
          name : this.name
      };
      api.getGame(params).then(data => {
        if (data.code === 200) {
          console.log(data);
          this.list = data.data;
          console.log(this.list);
        }
      });
    },
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  font-size: 12px;
}
.search {
  margin-left: 6%;
  margin-right: 6%;
  margin-bottom: 3%
}
/* .van-grid p {
  font-size: 12px;
}
.van-grid img {
  width: 74px;
  height: 74px;
} */
.price {
  color: #f44;
  width: 100%;
  text-align: left;
  font-size: 12px;
}
.title {
  width: 100%;
  text-align: left;
  line-height: 20px;
  margin: 8px 0;
  font-size: 12px;
}
.slider img {
  display: block;
  height: 230px;
  width: 100vw;
}
.notice {
  width: 90vw;
  margin: 2px auto;
  border-radius: 20px;
}
.single {
  width: 85vw;
  margin: 0 auto;
}
.more {
  margin-left: 80%;
  margin-top: 3%;
  margin-bottom: 3%;
  font-weight: 400;
  font-size: 14px;
}
.item {
  box-shadow: 0 0 3px #000;
}
.list img {
  display: block;
  width: 40vw;
}
.list li {
  width: 40vw;
  height: 30vh;
  border: 1px solid #cecece;
  margin: 0 8px 8px 0;
  float: left;
}
.list {
  width: 90vw;
  margin: 0 auto;
}
</style>
